<template>
  <div class="classJur">
    <!-- <commonHeader>分类权限管理</commonHeader> -->
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column align="center" fixed prop="shengfen" label="身份">
      </el-table-column>

      <el-table-column align="center" fixed="right" label="路由权限">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 筛选相关权限 -->
    <el-dialog label="分配权限" :visible.sync="dialogVisible" width="30%">
      <el-tree
        ref="tree"
        :data="jurlist"
        show-checkbox
        node-key="id"
        @check-change="handleCheckChange"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="arr"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogVisible">取 消</el-button>
        <el-button type="primary" @click="hadleDialogVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import commonHeader from "@/components/common/commonHeader.vue";  // 一般的加载组件方式
const commonHeader=()=>import("@/components/common/commonHeader.vue")   // 使用懒加载的方式
import { getClassJur, updataClassJur } from "@/api/data";
import { handleJur, delArr } from "@/tool";

export default {
  data() {
    return {
      shengfen: "",
      updataJurList: [],  // 修改后的权限路由数组
      arr: [],
      jurlist: [],
      defaultProps: {
        children: "children",
        label: "label",
      },

      dialogVisible: false,
      tableData: [
        {
          shengfen: "老师",
        },
        {
          shengfen: "学生",
        },
      ],
    };
  },
  methods: {
    // 获取选中的数据的数组
    handleCheckChange() {
      let res = this.$refs.tree.getCheckedNodes();
      let arr = [];
      res.forEach((item) => {
        arr.push(item.id);
      });
      this.updataJurList = delArr(arr);
    },

    // 取消修改
    cancelDialogVisible() {
      this.dialogVisible = false;
      
    },

    // 确认修改权限
    async hadleDialogVisible() {
      let data = await updataClassJur({
        _id: this.$store.state.userdata._id,
        shengfen: this.shengfen,
        arr: this.updataJurList,
      });
      this.$message.success(data.msg);
      this.dialogVisible = false;
    
    },
    // 点击编辑事件
    async handleClick(row) {
      this.jurlist=[]
      this.dialogVisible = true;
      this.shengfen = row.shengfen == "老师" ? 1 : 0;
      let data = await getClassJur({
        _id: this.$store.state.userdata._id,
        shengfen: this.shengfen,
      });

      let { menulist, arr } = handleJur(data.data[0]);
      // console.log(menulist, arr);
      this.jurlist = menulist;
      this.arr = arr;
    },
  },
  components: {
    commonHeader,
  },
};
</script>

<style>
.classJur {
  padding: 20px;
}
</style>